<template>
  <div class="apply-holiday">
    <!-- <van-nav-bar
      title="请假"
      left-arrow
      :safe-area-inset-top="true"
      @click-left="onClickLeft"
    /> -->
    <van-form @submit="onSubmit" style="margin-top: 1rem">
      <van-cell-group inset>
        <van-field
          v-model="reason"
          type="reson"
          name="理由"
          label="理由"
          placeholder="请输入请假理由"
          :rules="[{ required: true, message: '请填写请假理由' }]"
        />
      </van-cell-group>
      <div style="margin: 16px; margin-top: 2rem">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <div class="holiday-record">
      <van-pull-refresh
        style="height: 100%"
        v-model="refreshLoading"
        success-text="刷新成功！"
        @refresh="onRefresh"
      >
        <van-empty
          v-if="leaveList.length === 0"
          image-size="12rem"
          description="暂无请假记录"
        />
        <template v-else>
          <div class="item" v-for="item in leaveList" :key="item.id">
            <div class="time">
              <div class="label">时间</div>
              <div class="value">{{item.createTime}}</div>
            </div>
            <div class="reson">
              <div class="label">理由</div>
              <div class="value">{{item.reason}}</div>
            </div>
            <div class="status">
              <div class="label">状态</div>
              <div class="value">{{leaveStatus[item.status]}}</div>
            </div>
          </div>
        </template>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, toRefs } from 'vue'
import { useStore } from 'vuex'
import { Notify } from 'vant'
import { addCmsLeave, getMeetingUserLeave } from '@/api/meeting/holiday.js'
import { leaveStatus } from "@/enum.js"
export default {
  name: 'ApplyHoliday',
  props: {
    meetingId: {
      type: String,
      required: true,
      default: ""
    },
    meetingName: {
      type: String,
      required: true,
      default: ""
    },
  },
  setup(props) {
    const store = useStore()
    // const router = useRouter()
    // const route = useRoute()

    const userNumber = computed(() => store.getters.getUserNumber)
    const userName = computed(() => store.getters.getUserName)

    // const meetingId = route.query.meetingId
    // const meetingName = route.query.meetingName
    // console.log(route.query)
    const { meetingId, meetingName  } = toRefs(props)
    console.log(meetingName)

    let refreshLoading = ref(false)

    function onRefresh() {
      getLeaveData()
    }

    let reason = ref('')

    onMounted(() => {
      getLeaveData()
    })

    let leaveList = ref([])

    async function getLeaveData() {
      const res = await getMeetingUserLeave({userNumber: userNumber.value, meetingId: meetingId.value }) 
      console.log(res)
      leaveList.value = res.data.data

      // 关闭刷新
      refreshLoading.value = false
    }

    async function onSubmit() {
      const res = await addCmsLeave({
        meetingId: meetingId.value,
        meetingName: meetingName.value,
        userNumber: userNumber.value,
        userName: userName.value,
        reason: reason.value,
        status: 0,
      })
      console.log(res)
      if (res.data.code === 400) {
        Notify({ type: 'warning', duration: 1000, message: res.data.message })
        return
      }
      reason.value = ""
      Notify({ type: 'success', duration: 1000, message: '提交成功！' })
      // router.back()
      getLeaveData()
    }

    // const onClickLeft = () => history.back()

    return {
      reason,
      leaveList,
      leaveStatus,
      refreshLoading,
      // onClickLeft,
      onSubmit,
      onRefresh
    }
  },
}
</script>

<style lang="scss" scoped>
.apply-holiday  {
  width: 100%;
  height: 100vh;
  background-color: var(--global-bg);
  display: flex;
  flex-direction: column;

  .holiday-record {
    flex: 1;
    border-top: 0.1rem solid #ccc;
    box-sizing: border-box;
    padding: 1rem;
    overflow: auto;
    .item {
      width: 100%;
      height: 8rem;
      margin-bottom: 1rem;
      background-color: var(--item_background_color);
      border-radius: var(--global-border-radius);
      box-shadow: var(--box-shadow);

      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 1rem 2rem;


      .reson {
        .value {
          width: 26rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .time, .status, .reson {
        display: flex;
        letter-spacing: var(--letter-spacing);
      }

      .label {
        margin-right: 2rem;
        font-size: var(--second-text-size);
        color: var(--second-text-color);
      }
      .value {
        font-size: var(--second-text-size);
        // color: var(--second-text-color);
      }
    }
  }
}
</style>